<template>
	<div class="leftPannel-container">
		<Desciption url="@/assets/index/title/title.png" disableContent title="进出站垃圾数据统计" class="DisNetStatis">
		</Desciption>
		<div class="objModel pd-2">
			<InOuteChart></InOuteChart>
		</div>
		<Desciption url="@/assets/index/title/title.png" disableContent title="压缩厢实时状态" class="serverList"></Desciption>
		<div class="centerServer pd-2">
			<div class="rowBC" style="height: 100%;">
				<Status></Status>
			</div>
		</div>

		<Desciption url="@/assets/index/title/title.png" disableContent title="进出车辆统计" class="serverList"></Desciption>
		<div class="centerServer pd-2">
			<vehicleEChart isTag></vehicleEChart>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import {
		ref,
		computed,
		watch,
		onMounted,
		onBeforeUnmount,
		reactive,
		shallowRef
	} from 'vue';
	import {
		useStore
	} from "vuex";
	import * as echarts from "echarts";
	import InOuteChart from './components/eCharts/InOuteChart.vue'
	import StatusChart from './components/eCharts/StatusChart.vue'
	import Status from './components/eCharts/Status.vue'
	import vehicleEChart from './components/eCharts/vehicleEChart.vue'

	// const serveList = require('../../../../../public/static/serve.json')
	const store = useStore()

	const props = defineProps < {
	} > ()

	onMounted(() => {
		
	})
	
	onBeforeUnmount(() => {})
</script>

<style scoped lang="scss">
	.leftPannel-container {
		color: #fff;
		.pd-2 {
			padding: 1.25em;
		}
		.objModel {
			height: 23em;
			background-image: url('@/assets/img/index/leftUp.png');
			background-size: 100% 100%;
		}

		.objContent {
			:deep(.content) {
				display: flex;
				justify-content: center;
				background-color: #fff;
				background-clip: content-box;
			}
		}

		:deep(.el-carousel) {
			--el-carousel-indicator-out-color: #22edff;
		}

		.centerServer {
			height: 14.375em;
			background-image: url('@/assets/img/index/leftCenter.png');
			background-size: 100% 100%;
		}
	}
</style>
